import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, Link, Switch, Route } from 'react-router-dom'

import u from '../../common.js';
import BasicPage from '../basicStyle.js';
import $ from 'jquery';
import { Table, Pagination, LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';//国际化

import '../../static/headSearch/searchCont.less';

let searchFlag = true;
let valuetimer = null
//时间格式化
let dateFormate = (timestamp) => {
  let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear();
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

  let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
  let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();;
  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
  return Y + '-' + M + '-' + D + '  ' + h + ':' + m + ':' + s;
};

export default class SearchCont extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dataArr: [],//表格数据
      total: '',
      size: 10,
      current: 1,
      flag: false,
      loading: false,

    }
  }
  componentWillUnmount(){
    clearInterval(valuetimer)
  }
  componentWillMount() {
    this.updateValue()
    this.search()
  }
  updateValue() {
    let value = sessionStorage.getItem('inputVal')
    valuetimer = setInterval(() => {
      if (value == sessionStorage.getItem('inputVal')) return
      value = sessionStorage.getItem('inputVal')
      this.search()
    }, 10)
  }
  componentDidMount() {

    this.hightLight()
  }

  itemRender = (current, pagesize) => {
    // console.log(current)
    this.setState((prevState, props) => ({
      current: current,
      size: pagesize
    }), () => {
      this.search()
    })

  }
  // 表格数据高亮
  hightLight() {
    let time = setInterval(() => {
      if (this.state.flag) {
        this.setState({
          flag: false
        })
        let td = document.querySelectorAll('.ant-table-tbody>tr>td:nth-of-type(3)');
        for (let i = 0; i < td.length; i++) {
          td[i].innerHTML = this.state.dataArr[i].title;
        }
      }

    }, 10)
  }
  componentDidUpdate() {
    this.hightLight()
  }



  search = () => {

    this.setState({ loading: true });
    // 头部搜索功能实现
    if (this.props.match.params.id === '2') {

      u.shouYe({

        page: this.state.current,

      }, data => {
        searchFlag = false;
        let name = decodeURI(window.location.href.split('?')[1])

        let searchData = []
        data.data.forEach(el => {

          if (el.name === name) {
            searchData = el.value.data
          }
        })
        // let searchData = data.data[0].value.data;

        // console.log(searchData)
        let arr = [];

        for (let i = 0; i < searchData.length; i++) {

          arr.push({
            id: (this.state.current ? (this.state.current - 1) : 0) * this.state.size + i + 1,
            title: searchData[i].title,
            webSite: searchData[i].webSite,
            description: searchData[i].content,
            addTime: dateFormate(searchData[i].addTime),
            poTime: dateFormate(searchData[i].poTime),
            url: searchData[i].url,
            keyWord: searchData[i].keyWord,
            ids: searchData[i].id
          })
        }
        this.setState({
          dataArr: arr,
          total: data.data[0].value.total,
          flag: true,
          loading: false

        })
      })
    } else {
      u.dataStatistics({
        keyWord: sessionStorage.getItem('inputVal'),//获取本地input的value值
        page: this.state.current,
        size: this.state.size//每页的条数
      }, data => {
        // console.log(data);
        searchFlag = false;
        let searchData = data.data;
        // console.log(searchData)
        let arr = [];

        for (let i = 0; i < searchData.length; i++) {

          arr.push({
            id: (this.state.current ? (this.state.current - 1) : 0) * this.state.size + i + 1,
            title: searchData[i].title,
            webSite: searchData[i].webSite,
            description: searchData[i].content,
            addTime: dateFormate(searchData[i].addTime),
            poTime: dateFormate(searchData[i].poTime),
            url: searchData[i].url,
            keyWord: searchData[i].keyWord,
            ids: searchData[i].id
          })
        }
        this.setState({
          dataArr: arr,
          total: data.total,
          flag: true,
          loading: false

        })
      })
    }

  }

  render() {
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 200
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        width: 300
      },
      {
        title: '来源',
        dataIndex: 'webSite',
        key: 'webSite',
        width: 260
      },
      {
        title: '发布时间',
        dataIndex: 'addTime',
        key: 'addTime',
        width: 240
      },
      {
        title: '监测时间',
        dataIndex: 'poTime',
        key: 'poTime',
        width: 240
      },
      // { title: '操作', dataIndex: '', key: 'x', render: () => <a href="javascript:;">查看</a> },
    ];


    return (
      <div className='searchTable'>
        <Table
          columns={columns}
          pagination={false}
          expandedRowRender={record => <p dangerouslySetInnerHTML={{ __html: record.description.replace(/<br \/>/g, '').replace(/<vrv-img\/>/g, '') }} style={{ margin: 0 }}></p>}
          dataSource={this.state.dataArr}
          onRow={(record, rowkey) => {
            return {
              onClick: () => {
                const w = window.open('about:blank');
                // const w = window.open('about:blank');
                //  console.log(rowkey);
                // w.location.href = this.state.dataArr[rowkey].url
                // console.log(this.state.dataArr[rowkey])
                w.location.href = u.testurl + '/journa?' + this.state.dataArr[rowkey].ids + '?' + this.state.dataArr[rowkey].keyWord
              },
            }
          }}
          loading={this.state.loading}
          locale={{ emptyText: '暂无任何数据' }}
        />
        {/* 分页按钮 */}
        <LocaleProvider locale={zhCN}>
          <Pagination
            showQuickJumper
            showSizeChanger
            defaultCurrent={this.state.current}
            total={this.state.total}
            style={{ marginLeft: "27%", marginTop: "2%" }}
            defaultPageSize={10}
            onChange={this.itemRender}
            onShowSizeChange={this.itemRender}
          />
        </LocaleProvider>
      </div>
    )
  }

}



